<template>
  <view class="diary-card" @click="goDiaryDetailPage">
    <view class="diary-header" >
      <view class="user-info" >
        <view class="ava" >
          <image mode="aspectFill" :src="diary.user.avatar" />
        </view>
        <view class="info" >
          <view class="info-item" >
            <view class="name" >{{diary.user.name || '干支日记'}}</view>
            <view class="line" ></view>
            <view class="property" >
              <view class="property-1" >甲木</view>
              <!-- <image class="property-2" mode="aspectFill" src="/static/congqiang.png" /> -->
              <!-- <image class="property-2" mode="aspectFill" :src="diary.health" /> -->
            </view>
          </view>
          <view class="date" >
            发布于{{diary.time}}
          </view>   
        </view>
      </view>
      <view class="stars" > 
        <image mode="aspectFill" src="/static/star-small.png" v-for="(item, index) in diary.star" :key="index"  />
      </view>
    </view>
    <view class="diary-content" >
      {{diary.content}}
    </view>
    <view class="footer" >
      <view :class="['like', 'footer-item', diary.isLike ? 'active-like' : '', ]" @click.stop="likeDiary" >
        <image mode="aspectFill" :src="diary.isLike ? '/static/common/like.png' : '/static/common/unlike.png'" />
        <view>点赞</view>
      </view>
    </view>
    <!-- 点赞头像 -->
    <view class="likes" v-if="!pure" >
      <image class="icon" mode="aspectFill" src="/static/common/like.png" />
      <view class="like-ava" >
        <image mode="apsectFill" src="" v-for="item in 4" :key="item" />
      </view>
    </view>
  </view>

</template>
<script lang='ts'  setup >
import { DiaryController } from '@/controller';
import { ref } from 'vue';

export interface IProps {
  diary: API.DIARY,
  pure: boolean
}

const props = defineProps<IProps>()

const commentVsivible = ref(false)

const commentDiary = async (diary: API.DIARY) => {
  commentVsivible.value = true
}

const likeDiary = async () => {
 const status = await DiaryController.opraDiaryLikeStatus(props.diary.id, props.diary.isLike ? 0 : 1)
 if (status === 200) {
  props.diary.isLike = props.diary.isLike ? 0 : 1
 }
}


const goDiaryDetailPage =  () => {
   uni.navigateTo({
    url: `/pages/diary/detail?diaryId=${props.diary.id}`
   })
}

// const confirmComment = (text: string) => {
//   DiaryController.addDiaryMessage({
//     content: text,
//     userId: props.diary.user.id,
//     dailyId: props.diary.id
//   })
// }

</script>
<style lang='scss' scoped >
@import '../../styles/index.scss';

 .diary-card {
  width: 676rpx; 
  // height: 500rpx;
  padding: 24rpx;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  &:hover {
    transform: translateY(-4rpx);
    box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.15);
  }

  .diary-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    .user-info {
      width: 100%;
      display: flex;
      align-items: center;
      .ava {
        width: 86rpx;
        height: 86rpx;
        margin-right: 24rpx;
        image {
          width: 100%;
          height: 100%;
          display: block;
          border-radius: 50%;
        }
      }
      .info {
        .info-item {
          display: flex;
          align-items: center;
          .name {
            // font-weight: 600;
            margin-top: -4rpx;
          }
          .line {
            width: 2rpx;
            height: 24rpx;
            background-color: $text-color;
            margin: 0 12rpx;
          }
          .property {
            display: flex;
            align-items: center;
            .property-1 {
              color: green;
              margin-right: 6rpx;
            }
            .property-2 {
              width: 19rpx;
              height: 28rpx;
              display: block;
            }
          }
        }
        .date {
          font-size: 24rpx;
          color: $text-color;
        }
      }
    }
    .stars {
      display: flex;
      align-items: center;
      margin-top: -36rpx;
      image {
        width: $image-width-big;
        height: $image-width-big;
        display: block;
        margin-right: 4rpx;
      }
    }
  }
  .diary-content {
    padding: 0 12rpx;
    font-size: 28rpx;
    line-height: 40rpx;
    color: $text-grey;
    box-sizing: border-box;
  }
  .footer {
    color: #adadad;
    font-size: 24rpx;
    display: flex;
    justify-content: flex-end;
    margin-top: 24rpx;
    .footer-item {
      width: 160rpx;
      height: 56rpx;
      // background-color: #f3f3f3;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: #f3f3f3;
      }

      image {
        width: $image-width-big;
        height: $image-width-big;
        margin-right: 8rpx;
      }
    }
    .like {
      // border-right: 2rpx solid #ccc;
    }
    .active-like {
      color: $main-color;
      // background-color: $main-color;
    }
    .comment {

    }
  }
  .likes {
    display: flex;
    .icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 12rpx;
    }
    .like-ava {
      display: flex;
      image {
        width: 40rpx;
        height: 40rpx;
        display: block;
        background-color: red;
        border-radius: 50%;
        margin-right: 4rpx;
      }
    }
  }

  .comment-list {
    margin-top: 24rpx;
    .comment-item-1 {
      width: 100%;
    }
    .comment-item-2 {
      width: 85%;
      position: relative;
      left: 98rpx;
      margin-top: 12rpx;
    }
  }
 }

</style>